<script setup lang="ts">
import { ElDrawer, ElDivider, ElButton, ElMessage } from 'element-plus'
import { ref, unref, computed, watch } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { ThemeSwitch } from '@/components/ThemeSwitch'
import { useAppStore } from '@/store/modules/app'
import ColorRadioPicker from './components/ColorRadioPicker.vue'
import InterfaceDisplay from './components/InterfaceDisplay.vue'
import LayoutRadioPicker from './components/LayoutRadioPicker.vue'
import { useDesign } from '@/hooks/web/useDesign'
import { propTypes } from '@/utils/propTypes'
import { Icon } from '@/components/Icon'
import { SystemUserSetting } from '@/api/system/userSetting/types'
import { updateSystemUserSettingApi } from '@/api/system/userSetting'

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('setting')

const appStore = useAppStore()

const { t } = useI18n()

const layout = computed(() => appStore.getLayout)

const drawer = ref(false)

// 主题色相关
const systemTheme = ref(appStore.getTheme.elColorPrimary)
const setSystemTheme = (color: string) => {
  appStore.setSystemTheme(color)
  appStore.setSystemThemeColor(color)
}
const loading = ref(false)

// 头部主题相关
const headerTheme = ref(appStore.getTheme.topHeaderBgColor || '')

const setHeaderTheme = (color: string) => {
  appStore.setHeaderTheme(color)
  appStore.setHeaderThemeColor(color)
}

// 菜单主题相关
const menuTheme = ref(appStore.getTheme.leftMenuBgColor || '')
const setMenuThemeFn = (color: string) => {
  appStore.setMenuTheme(color)
  appStore.setMenuThemeColor(color)
}

defineProps({
  color: propTypes.string.def('')
})

// 监听layout变化，重置一些主题色
watch(
  () => layout.value,
  (n) => {
    if (n === 'top' && !appStore.getIsDark) {
      headerTheme.value = '#fff'
      setHeaderTheme('#fff')
    } else {
      setMenuThemeFn(unref(menuTheme))
    }
  }
)

watch(
  () => appStore.getTheme,
  (n) => {
    systemTheme.value = appStore.getTheme.elColorPrimary
    menuTheme.value = appStore.getTheme.leftMenuBgColor || ''
    headerTheme.value = appStore.getTheme.topHeaderBgColor || ''
  }
)

const saveSetting = async () => {
  loading.value = true
  const systemUserSetting: SystemUserSetting = {
    settingId: appStore.getSettingId,
    userId: appStore.getUserId,
    darkMode: appStore.getIsDark,
    layoutType: appStore.getLayout,
    systemThemeColor: appStore.getSystemThemeColor,
    headerThemeColor: appStore.getHeaderThemeColor,
    menuThemeColor: appStore.getMenuThemeColor,
    showBreadcrumb: appStore.getBreadcrumb,
    showBreadcrumbIcon: appStore.getBreadcrumbIcon,
    showTagsView: appStore.getTagsView,
    showTagsViewIcon: appStore.getTagsViewIcon,
    showUniqueOpened: appStore.getUniqueOpened,
    fixedHeader: appStore.getFixedHeader,
    fixedMenu: appStore.getFixedMenu
  }
  await updateSystemUserSettingApi(systemUserSetting)
  drawer.value = false
  loading.value = false
  ElMessage.success('保存成功')
}
</script>

<template>
  <div :class="prefixCls" @click="drawer = true" class="custom-hover">
    <Icon icon="svg-icon:userSetting" :size="18" color="var(--top-header-text-color)" />
  </div>

  <ElDrawer v-model="drawer" direction="rtl" size="350px" :z-index="4000">
    <template #header>
      <span class="text-16px font-700">{{ t('setting.styleSetting') }}</span>
    </template>

    <div class="text-center">
      <!-- 主题 -->
      <ElDivider>{{ t('setting.theme') }}</ElDivider>
      <ThemeSwitch />

      <!-- 布局 -->
      <ElDivider>{{ t('setting.layout') }}</ElDivider>
      <LayoutRadioPicker />

      <!-- 系统主题 -->
      <ElDivider>{{ t('setting.systemTheme') }}</ElDivider>
      <ColorRadioPicker
        v-model="systemTheme"
        :schema="[
          '#409eff',
          '#009688',
          '#536dfe',
          '#ff5c93',
          '#ee4f12',
          '#0096c7',
          '#9c27b0',
          '#ff9800'
        ]"
        @change="setSystemTheme"
      />

      <!-- 头部主题 -->
      <ElDivider>{{ t('setting.headerTheme') }}</ElDivider>
      <ColorRadioPicker
        v-model="headerTheme"
        :schema="[
          '#fff',
          '#151515',
          '#5172dc',
          '#e74c3c',
          '#24292e',
          '#394664',
          '#009688',
          '#383f45'
        ]"
        @change="setHeaderTheme"
      />

      <!-- 菜单主题 -->
      <template v-if="layout !== 'top'">
        <ElDivider>{{ t('setting.menuTheme') }}</ElDivider>
        <ColorRadioPicker
          v-model="menuTheme"
          :schema="[
            '#fff',
            '#001529',
            '#212121',
            '#273352',
            '#191b24',
            '#383f45',
            '#001628',
            '#344058'
          ]"
          @change="setMenuThemeFn"
        />
      </template>
    </div>

    <!-- 界面显示 -->
    <ElDivider>{{ t('setting.interfaceDisplay') }}</ElDivider>
    <InterfaceDisplay />

    <ElDivider />
    <div class="mt-5px">
      <ElButton type="primary" class="w-full" @click="saveSetting" :loading="loading">
        保存配置
      </ElButton>
    </div>
  </ElDrawer>
</template>

<style lang="less" scoped>
@prefix-cls: ~'@{vueNamespace}-setting';

.@{prefix-cls} {
  border-radius: 6px 0 0 6px;
}
</style>
